import type { Graph } from '@antv/x6'
import { useContextMenu } from '@/stores/useContextMenu'

const { setPosition } = useContextMenu()
export const registerEvent = (graph: Graph) => {
  graph.on('blank:contextmenu', ({ e }) => {
    console.log(e)
    console.log(graph.localToClient(e.clientX, e.clientY))
    const point = graph.localToClient(e.clientX, e.clientY)
    setPosition(point.x, point.y)
  })

  graph.on('node:dblclick', ({ node }) => {
    console.log(node)
    node.setData({
      dialog: true
    })
  })

  // 鼠标 Hover 时添加按钮
  graph.on('node:mouseenter', ({ node }) => {
    // 创建节点后添加小工具
    node.addTools([
      {
        name: 'button-remove',
        args: { x: 10, y: 10 }
      }
    ])
  })

// 鼠标移开时删除按钮
  graph.on('node:mouseleave', ({ node }) => {
    node.removeTools() // 删除所有的工具
  })

  graph.on('edge:mouseenter', ({ cell }) => {
    cell.addTools([
      { name: 'vertices' },
      {
        name: 'button-remove',
        args: { distance: 20 },
      },
    ])
  })

  graph.on('edge:mouseleave', ({ cell }) => {
    if (cell.hasTool('button-remove')) {
      cell.removeTool('button-remove')
    }
  })

}
